<template>
  <div class="About">
    <el-header class="headerBox">
      <div class="item">
        <el-input
          placeholder="输入关键字搜索"
          v-model="filterText"
          style="width:10vw;margin-right:1vw"
        ></el-input>
        <el-button size="small" type="primary" @click="SearchBom"
          >搜索</el-button
        >
        <el-button size="small" type="primary" @click="handleVisable"
          >添加</el-button
        >
        <el-button
          size="small"
          type="warning"
          @click="handleAbout"
          style="margin-right:1vw"
          >设计BOM</el-button
        >
        <el-select v-model="copyValue" clearable placeholder="请选择">
          <el-option
            v-for="item in copyBom"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          size="small"
          type="danger"
          @click="CopyBoms"
          style="margin-left:1vw"
          >复制</el-button
        >
        <el-button size="small" type="danger" @click="getPrice"
          >理想成本核算</el-button
        >
        <el-button size="small" type="warning" @click="handleSave"
          >保存</el-button
        >
      </div>
    </el-header>
    <el-container class="containerBox">
      <!-- 左侧内容开始 -->
      <el-aside class="asideBox">
        <div class="treeBox">
          <el-tree
            :data="dataVal"
            node-key="id"
            ref="tree"
            :highlight-current="true"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleCheckChange"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => append(node, data)"
                >
                  <i class="el-icon-circle-plus-outline"></i>
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)"
                >
                  <i class="el-icon-delete"></i>
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </el-aside>
      <!-- 左侧内容结束 -->
      <!-- 右侧内容开始 -->
      <el-container class="rightBox">
        <!-- 右侧顶部开始 -->
        <div class="mainBox">
          <el-form :inline="true" :model="formInline" label-width="100px">
            <el-form-item label="订单编号">
              <el-input
                :readonly="true"
                v-model="formInline.OrderNo"
                :style="{ width: width + 'vw' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="合同编号">
              <el-input
                :readonly="true"
                v-model="formInline.ProjectNo"
                :style="{ width: width + 'vw' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="BOM名称">
              <el-input v-model="formInline.cDefine3"></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
              <el-input
                :readonly="true"
                v-model="formInline.cInvName"
                :style="{ width: width + 'vw' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="产品编码">
              <el-input
                :readonly="true"
                v-model="formInline.cInvCode"
                :style="{ width: width + 'vw' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="版本号">
              <el-input
                :readonly="true"
                v-model="formInline.Verson"
                :style="{ width: width + 'vw' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                :readonly="true"
                v-model="formInline.Remark"
                :style="{ width: width + 'vw' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="交货日期">
              <el-input
                :readonly="true"
                v-model="formInline.ConfirmDate"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建人">
              <el-input
                :readonly="true"
                v-model="formInline.CreateUser"
                :style="{ width: width + 'vw' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否禁用">
              <el-radio v-model="formInline.State" disabled :label="1"
                >启用</el-radio
              >
              <el-radio v-model="formInline.State" disabled :label="0"
                >禁用</el-radio
              >
            </el-form-item>
          </el-form>
        </div>
        <!-- 右侧底部结束 -->
        <!-- 右侧底部开始 -->
        <div class="footerBox">
          <el-tabs v-model="activeFooter" @tab-click="handleClick">
            <!-- 原材料开始 -->
            <el-tab-pane label="原材料" name="1">
              <el-table
                size="small"
                :max-height="maxHeight"
                :data="rawTableData"
                :border="true"
              >
                <el-table-column label="序号" prop="ROWINDEX" width="55" />
                <el-table-column label="编码" prop="cInvCode">
                </el-table-column>
                <el-table-column label="名称" prop="cInvName">
                </el-table-column>
                <el-table-column label="分类" prop="Type"> </el-table-column>
                <el-table-column label="单位" prop="UnitName">
                </el-table-column>
                <el-table-column label="来源分类" prop="SourceType">
                </el-table-column>
                <el-table-column label="数量" prop="cDefine1">
                </el-table-column>
                <el-table-column label="规格" prop="cInvStd"> </el-table-column>
                <el-table-column label="图片" align="left">
                  <!-- eslint-disable-next-line -->
                  <template slot-scope="scope">
                    <el-popover placement="right" trigger="hover">
                      <img
                        :src="'http://121.36.226.94:8089/' + scope.row.cDefine4"
                        class="imgStyle"
                      />
                      <img
                        slot="reference"
                        :src="'http://121.36.226.94:8089/' + scope.row.cDefine4"
                        style="max-height: 30px; max-width: 60px"
                      />
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="getNumPost(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column align="center">
                  <!-- eslint-disable-next-line -->
                  <template slot="header" slot-scope="scope">
                    <el-button
                      size="small"
                      type="primary"
                      @click="tableVisible = true"
                      >添加</el-button
                    >
                  </template>
                  <template slot-scope="scope">
                    <el-popconfirm
                      title="确定移除该产品吗？"
                      @confirm="handleDelete(scope.$index, scope.row)"
                    >
                      <el-button size="mini" type="danger" slot="reference"
                        >移除</el-button
                      >
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <div class="block">
                <el-pagination
                  @size-change="rawSizeChange"
                  @current-change="rawCurrentChange"
                  :current-page.sync="rawTablePage.currentPage"
                  :page-sizes="rawTablePage.pageSizes"
                  :page-size="rawTablePage.pageSize"
                  layout="sizes, prev, pager, next"
                  :total="rawTablePage.total"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <!-- 原材料结束 -->
            <!-- 自制件开始 -->
            <el-tab-pane label="自制件" name="2">
              <el-table
                size="small"
                :max-height="maxHeight"
                :data="selfTableData"
                :border="true"
              >
                <el-table-column label="序号" prop="ROWINDEX" width="55" />
                <el-table-column label="编码" prop="BomNo" />
                <el-table-column label="名称" prop="cDefine3" />
                <el-table-column label="版本号" prop="Verson" />
                <el-table-column label="工时(h)" prop="cDefine4" />
                <el-table-column label="损耗" prop="cDefine5" />
                <el-table-column label="实际工时(h)" prop="cDefine1" />
                <el-table-column label="实际损耗" prop="cDefine2" />
                <el-table-column label="数量" prop="ProdQty" />
                <el-table-column label="单位" prop="UnitName" />
                <el-table-column label="创建人" prop="CreateUser" />
                <el-table-column label="备注" prop="Remark" />
                <el-table-column label="图片" align="right">
                  <!-- eslint-disable-next-line -->
                  <template slot-scope="scope">
                    <el-image
                      style="width: 3vw; height: 1.5vw"
                      :src="
                        'http://121.36.226.94:8081/api/values/Upload/' +
                          scope.row.cDefine6
                      "
                      :preview-src-list="[
                        'http://121.36.226.94:8081/api/values/Upload/' +
                          scope.row.cDefine6,
                      ]"
                    >
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <!-- eslint-disable-next-line -->
                  <template slot-scope="scope">
                    <el-button
                      size="small"
                      type="primary"
                      @click="handleEdit(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <div class="block">
                <el-pagination
                  @size-change="selfSizeChange"
                  @current-change="selfCurrentChange"
                  :current-page.sync="selfTablePage.currentPage"
                  :page-sizes="selfTablePage.pageSizes"
                  :page-size="selfTablePage.pageSize"
                  layout="sizes, prev, pager, next"
                  :total="selfTablePage.total"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <!-- 自制件结束-->
          </el-tabs>
        </div>
        <!-- 右侧底部结束 -->
      </el-container>
      <!-- 右侧内容结束 -->
      <!-- 修改自制件开始 -->
      <el-dialog title="修改自制件" :visible.sync="selfVisible">
        <el-form
          :model="selfForm"
          ref="sonForm"
          labelPosition="left"
          label-width="100px"
        >
          <el-form-item label="BOM名称" prop="cDefine3">
            <el-input v-model="selfForm.cDefine3" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="ProdQty">
            <el-input v-model="selfForm.ProdQty" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="UnitName">
            <el-select v-model="selfForm.UnitName" placeholder="请选择">
              <el-option
                v-for="item in fnOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="版本号" prop="Verson">
            <el-input v-model="selfForm.Verson" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="CreateUser">
            <el-input
              v-model="selfForm.CreateUser"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="实际工时(h)" prop="cDefine4">
            <el-input v-model="selfForm.cDefine4" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="实际损耗" prop="cDefine5">
            <el-input v-model="selfForm.cDefine5" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="Remark">
            <el-input v-model="selfForm.Remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否禁用">
            <el-radio v-model="selfForm.State" :label="1">启用</el-radio>
            <el-radio v-model="selfForm.State" :label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="delSelfVisible">取 消</el-button>
          <el-button type="primary" @click="sunSelfVisible()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改自制件结束 -->
      <!-- 理想报价开始 -->
      <el-dialog
        title="理想成本报价"
        :fullscreen="true"
        :visible.sync="priceTableVisible"
      >
        <el-table
          size="small"
          :data="priceTabData"
          :border="true"
          max-height="700"
        >
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column label="BOM编码" prop="cInvCode" />
          <el-table-column label="名称" prop="cInvName" />
          <el-table-column label="单位" prop="MtlUnitCost" />
          <el-table-column label="单价" prop="MtlUnitCost" />
          <el-table-column label="数量" prop="TakeQty" />
          <el-table-column label="理想工时" prop="lxgongshi" />
          <el-table-column label="理想耗损" prop="lxhaosun" />
          <el-table-column label="实际工时" prop="sjgongshi" />
          <el-table-column label="实际耗损" prop="sjhaosun" />
        </el-table>
        <el-pagination
          @size-change="priceSizeChange"
          @current-change="priceCurrentChange"
          :current-page.sync="priceTablePage.currentPage"
          :page-sizes="priceTablePage.pageSizes"
          :page-size="priceTablePage.pageSize"
          layout="sizes, prev, pager, next"
          :total="priceTablePage.total"
        >
        </el-pagination>
        <div slot="footer" class="dialog-footer">
          <el-button @click="priceTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlePriceTable">导出</el-button>
        </div>
      </el-dialog>
      <!-- 理想成本结束 -->
      <!-- 选择材料开始 -->
      <el-dialog
        title="选择材料"
        :fullscreen="true"
        :visible.sync="tableVisible"
      >
        <div class="searchBox">
          <el-input placeholder="请输入内容" v-model="searchInput" clearable>
          </el-input>
          <el-button type="primary" @click="allSearch">搜索</el-button>
        </div>

        <el-table
          size="small"
          :data="allTableData"
          ref="multipleTable"
          :border="true"
          max-height="650"
          :row-key="getRowKeys"
          @selection-change="handleAllSelection"
          :highlight-current-row="true"
        >
          <el-table-column
            type="selection"
            width="55"
            :reserve-selection="true"
          />
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column label="编码" prop="cInvCode" />
          <el-table-column label="名称" prop="cInvName" />
          <el-table-column label="分类" prop="TypeName" />
          <el-table-column label="单位" prop="UnitName" />
          <el-table-column label="来源分类" prop="SourceType" />
          <el-table-column label="安全库存" prop="SafeStockNum" />
          <el-table-column label="最低库存" prop="MinStockNum" />
          <el-table-column label="最高库存" prop="MaxStocNum" />
          <el-table-column label="主放仓库" prop="StorageName" />
          <el-table-column label="规格" prop="Size" />
          <el-table-column label="图片" align="left">
            <!-- eslint-disable-next-line -->
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover">
                <img
                  :src="'http://121.36.226.94:8089/' + scope.row.FileURL"
                  class="imgStyle"
                />
                <img
                  slot="reference"
                  :src="'http://121.36.226.94:8089/' + scope.row.FileURL"
                  style="max-height: 30px; max-width: 60px"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="填写数量">
            <!-- eslint-disable-next-line -->
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.cDefine15"
                placeholder="请填写"
                clearable
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="tableSizeChange"
          @current-change="tableCurrentChange"
          :current-page.sync="tablePage.currentPage"
          :page-sizes="tablePage.pageSizes"
          :page-size="tablePage.pageSize"
          layout="sizes, prev, pager, next"
          :total="tablePage.total"
        >
        </el-pagination>
        <div slot="footer" class="dialog-footer">
          <el-button @click="tableVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleDelTable">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 选择材料结束 -->
      <!-- 新增子级BOM树开始 -->
      <el-dialog title="添加子级BOM" :visible.sync="CliVisible">
        <el-form
          :model="sonForm"
          ref="sonForm"
          labelPosition="left"
          label-width="120px"
          :rules="sonRules"
        >
          <el-form-item label="BOM名称" prop="cDefine3">
            <el-input v-model="sonForm.cDefine3" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="ProdQty">
            <el-input v-model="sonForm.ProdQty" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="UnitName">
            <el-select v-model="sonForm.UnitName" placeholder="请选择">
              <el-option
                v-for="item in fnOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="版本号" prop="Verson">
            <el-input v-model="sonForm.Verson" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="CreateUser">
            <el-input
              v-model="sonForm.CreateUser"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="工时(h)" prop="cDefine4">
            <el-input v-model="sonForm.cDefine4" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="损耗" prop="cDefine5">
            <el-input v-model="sonForm.cDefine5" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="Remark">
            <el-input v-model="sonForm.Remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否禁用">
            <el-radio v-model="sonForm.State" :label="1">启用</el-radio>
            <el-radio v-model="sonForm.State" :label="0">禁用</el-radio>
          </el-form-item>
          <el-upload
            action="http://121.36.226.94:8081/api/values/UploadCallingCard"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <el-button type="primary">导入图纸</el-button>
          </el-upload>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="delSonVisible">取 消</el-button>
          <el-button type="primary" @click="sunSonVisible('sonForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 新增子级BOM树结束-->
      <!-- 新增父级别BOM树开始 -->
      <el-dialog title="仅可添加一级BOM" :visible.sync="FnVisible">
        <el-form
          :model="fnForm"
          ref="fnForm"
          labelPosition="left"
          label-width="100px"
        >
          <el-form-item label="BOM名称" prop="cDefine3">
            <el-input v-model="fnForm.cDefine3" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="选择产品" prop="cInvCode">
            <el-select v-model="fnForm.cInvCode" placeholder="请选择">
              <el-option
                v-for="item in ProductList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="ProdQty">
            <el-input v-model="fnForm.ProdQty" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="UnitName">
            <el-select v-model="fnForm.UnitName" placeholder="请选择">
              <el-option
                v-for="item in fnOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="版本号" prop="Verson">
            <el-input v-model="fnForm.Verson" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="合同编号" prop="OrderNo">
            <el-input v-model="fnForm.OrderNo" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单编号" prop="ProjectNo">
            <el-input v-model="fnForm.ProjectNo" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="交货日期" prop="ConfirmDate">
            <el-date-picker
              type="date"
              format="yyyy 年 MM 月 dd 日"
              v-model="fnForm.ConfirmDate"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="创建人" prop="CreateUser">
            <el-input v-model="fnForm.CreateUser" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否禁用">
            <el-radio v-model="fnForm.State" :label="1">启用</el-radio>
            <el-radio v-model="fnForm.State" :label="0">禁用</el-radio>
          </el-form-item>
          <el-form-item label="备注" prop="Remark">
            <el-input v-model="fnForm.Remark" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="delFnVisible">取 消</el-button>
          <el-button type="primary" @click="sunFnVisible">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增父级别BOM树结束 -->
    </el-container>
  </div>
</template>

<script>
import { request } from "../http.js";
export default {
  data() {
    return {
      //左侧数据
      copyBom: [], //复制bom
      copyValue: "",
      filterText: "",
      maxHeight: "630",
      width: "6.75",
      CliVisible: false, //子级弹出框
      FnVisible: false, //父级弹出框
      //树结构数据
      dataVal: [],
      // 树形控件配置项，为对象，label代表节点的title标签，children代表节点的子树（孩子）
      defaultProps: {
        label: "label",
        children: "children",
      },
      //新增一级Bom
      fnForm: {
        Verson: "",
        CreateUser: "",
        Remark: "",
        UnitName: "",
        cInvCode: "",
        State: 1,
        ConfirmDate: "",
        OrderNo: "",
        ProjectNo: "",
        ProdQty: "",
        cDefine3: "",
      },
      //新增子集BOM
      sonForm: {
        Verson: "",
        CreateUser: "",
        Remark: "",
        UnitName: "",
        State: 1,
        ConfirmDate: "",
        ProdQty: "",
        cDefine3: "",
        cDefine4: "",
        cDefine5: "",
        cDefine6: "",
      },
      //新增子级bom校验
      sonRules: {
        cDefine3: {
          required: true,
          message: "BOM名称不得为空",
          trigger: "blur",
        },
        cDefine4: { required: true, message: "工时不得为空", trigger: "blur" },
        cDefine5: {
          required: true,
          message: "耗损率不得为空",
          trigger: "blur",
        },
      },
      id: 0, //新增子节点选中后的id
      clickId: 0, //单击节点选中的id
      editId: 0, //修改自制件工时id
      fnOptions: [], //单位
      value: "", //单位的值
      ProductList: [],
      //右侧数据
      tableVisible: false, //材料选择弹出框
      selfVisible: false, //修改自制件
      priceTableVisible: false, //销售报价弹窗
      formInline: {
        //主bom信息
        cDefine1: "",
        cDefine2: "",
        cDefine3: "",
        Verson: "",
        Remark: "",
        ConfirmDate: "",
        CreateUser: "",
        State: 1,
        cInvName: "",
        cInvCode: "",
      },
      //修改自制件信息
      rowId: 0,
      selfForm: {
        Verson: "",
        CreateUser: "",
        Remark: "",
        UnitName: "",
        State: 1,
        ConfirmDate: "",
        ProdQty: "",
        cDefine3: "",
        cDefine4: "",
        cDefine5: "",
      },
      activeFooter: "1", //活跃的tabs
      priceTabData: [], //理想成本报价数据
      rawTableData: [], //原材料表格数据
      selfTableData: [], //自制件表格数据
      allTableData: [], //所有原料表格数据
      searchInput: "",
      InvDetailVal: [], //选中的原材料数据
      //原材料分页
      rawTablePage: {
        total: 0, //总条数
        pageSize: 10, // 每页显示的数量
        currentPage: 0, //当前页
        pageSizes: [10, 15, 20],
      },
      //自制件分页
      selfTablePage: {
        total: 0, //总条数
        pageSize: 10, // 每页显示的数量
        currentPage: 0, //当前页
        pageSizes: [10, 15, 20],
      },
      //弹窗物料分页
      tablePage: {
        total: 0, //总条数
        pageSize: 50, // 每页显示的数量
        currentPage: 0, //当前页
        pageSizes: [50, 100, 150],
      },
      //理想报价分页
      priceTablePage: {
        total: 0, //总条数
        pageSize: 50, // 每页显示的数量
        currentPage: 0, //当前页
        pageSizes: [50, 100, 150],
      },
      //弹窗物料选中的数据
      selectTable: [],
    };
  },
  methods: {
    //上传图片
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.sonForm.cDefine6 = res;
    },
    //导出报价
    handlePriceTable() {
      // console.log(this.clickId)
      window.open(
        `${"http://121.36.226.94:8081/api/Values/ExcelDesProBom?id=" +
          this.clickId}`
      );
    },
    //顶部保存按钮
    handleSave() {
      this.$message({
        type: "success",
        message: "保存成功!",
      });
    },
    //获取复制BOM数据
    GetDesignBom() {
      request({
        url: "/api/Values/GetDesignBom",
        method: "get",
      })
        .then((res) => {
          // console.log(res.data);
          this.copyBom = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //选中数据开始复制
    CopyBoms() {
      console.log(this.copyValue);

      request({
        url: "/api/Values/CopyBom",
        method: "post",
        params: {
          id: this.copyValue,
        },
      })
        .then((res) => {
          if (res.data == "0") {
            this.getTreeTable();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //顶部搜索
    SearchBom() {
      this.getTreeTable();
    },
    //获取生产bom树数据
    async getTreeTable() {
      await request({
        url: "/api/Values/GetBomTree",
        method: "post",
        params: {
          Type: "PrdBom",
          message: this.filterText,
        },
      })
        .then((res) => {
          this.dataVal = res.data;
          // console.log(this.dataVal)
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改原材料数量
    getNumPost(index, row) {
      // console.log(index, row);
      let id = row.ID;
      let CurrentNum = row.cDefine1;
      this.$prompt("请输入数量", "修改数量", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: CurrentNum,
      })
        .then(({ value }) => {
          console.log(value);
          request({
            url: "/api/Values/UpdateBomDetailNum",
            method: "post",
            params: {
              ID: id,
              nqty: value,
            },
          })
            .then((res) => {
              console.log(res.data);
              if (res.data == 1) {
                this.$message({
                  type: "success",
                  message: "修改数量成功!",
                });
                this.GetBomDetail();
              } else {
                this.$message({
                  type: "info",
                  message: "修改数量失败!",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //新增一级BOM
    async sunFnVisible() {
      this.FnVisible = false;
      // console.log(this.fnForm);
      await this.postFnBom();
      // this.resetForm("fnForm");
    },
    //新增一级BOM
    postFnBom() {
      request({
        url: "/api/Values/InsertBom",
        method: "post",
        data: {
          ParentNo: 0,
          Type: "PrdBom",
          cDefine3: this.fnForm.cDefine3,
          Verson: this.fnForm.Verson,
          State: this.fnForm.State,
          ProdQty: this.fnForm.ProdQty,
          OrderNo: this.fnForm.OrderNo,
          ProjectNo: this.fnForm.ProjectNo,
          ConfirmDate: this.fnForm.ConfirmDate,
          CreateUser: this.fnForm.CreateUser,
          CreateDate: this.fnForm.CreateDate,
          Stated: this.fnForm.Stated,
          Remark: this.fnForm.Remark,
          UnitName: this.fnForm.UnitName,
          cInvCode: this.fnForm.cInvCode,
          cDefine4: "",
          cDefine5: "",
          cInvName: "",
          cInvStd: "",
          ExRate: "",
          ModifiedDate: "",
          ModifiedUser: "",
        },
      })
        .then((res) => {
          // console.log(res);
          if (res.status == 200) {
            this.$message({
              message: "添加一级BOM成功",
              type: "success",
            });
            this.FnVisible = false;
            this.resetForm("fnForm");
            this.getTreeTable();
          } else {
            this.$message({
              message: "添加一级BOM失败",
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改自制件工时
    handleEdit(index, row) {
      console.log(index, row);
      this.rowId = row.ID;
      this.selfVisible = true;
      this.selfForm.Verson = row.Verson;
      this.selfForm.CreateUser = row.CreateUser;
      this.selfForm.Remark = row.Remark;
      this.selfForm.State = row.State;
      this.selfForm.ConfirmDate = row.ConfirmDate;
      this.selfForm.ProdQty = row.ProdQty;
      this.selfForm.cDefine3 = row.cDefine3;
      this.selfForm.cDefine4 = row.sjgongshi;
      this.selfForm.cDefine5 = row.sjhaosun;
      this.selfForm.UnitName = row.UnitName;
    },
    delSelfVisible() {
      this.selfVisible = false;
    },
    sunSelfVisible() {
      console.log(this.rowId);
      request({
        url: "/api/Values/UpdateBomSunPrdBom",
        method: "post",
        params: {
          id: this.rowId,
          cDefine3: this.selfForm.cDefine3,
          ProdQty: this.selfForm.ProdQty,
          UnitName: this.selfForm.UnitName,
          Verson: this.selfForm.Verson,
          Remark: this.selfForm.Remark,
          cDefine1: this.selfForm.cDefine4,
          cDefine2: this.selfForm.cDefine5,
          CreateUser: this.selfForm.CreateUser,
        },
      })
        .then((res) => {
          // console.log(res.data == "1");
          if (res.data == "1") {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.GetBomHomemade();
            this.getTreeTable();
            this.selfVisible = false;
          } else {
            this.$message({
              type: "error",
              message: "修改失败!",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //理想成本报价报价
    getPrice() {
      this.priceTableVisible = true;
      console.log(this.clickId);
      request({
        url: "/api/Values/GetPartTranLix",
        method: "post",
        params: {
          id: this.clickId,
        },
      })
        .then((res) => {
          console.log(res);
          this.priceTabData = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //理想分页事件
    priceSizeChange(val) {
      this.priceTablePage.pageSize = val;
      this.GetInventory(val, 1);
      this.priceTablePage.currentPage = 1;
    },
    priceCurrentChange(val) {
      this.priceTablePage.currentPage = val;
      this.GetInventory(this.priceTablePage.pageSize, val);
    },
    //清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAbout() {
      this.$router.push("/");
    },
    //点击bom树出现的原材料数据
    handleCheckChange(node, data) {
      let parId = data.parent.data.id;
      const sonId = node.id;
      this.clickId = node.id;
      if (parId == undefined) {
        parId = 0;
        this.GetBomDetailsValue(sonId, parId);
      }
      this.GetBomDetail();
      this.GetBomHomemade();
    },
    //选项卡事件
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    //删除原材料
    handleDelete(index, row) {
      console.log(index, row.ID);
      request({
        url: "/api/Values/DeleteCheckInventoryProBom",
        method: "post",
        params: {
          id: row.ID,
        },
      })
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            this.$message({
              type: "success",
              message: "移除成功!",
            });
            this.GetBomDetail();
            this.getTreeTable();
          }
          if (res.data == 0) {
            this.$message({
              type: "info",
              message: "已经领料的物料不允许删除，删除失败!",
            });
          }
          if (res.data == 2) {
            this.$message({
              type: "info",
              message: "删除失败!",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //原材料分页事件
    rawSizeChange(val) {
      // console.log(`每页 ${val} 条`, "rawSizeChange");
      this.rawTablePage.pageSize = val;
      this.GetBomDetail(val, 1);
      this.rawTablePage.currentPage = 1;
    },
    rawCurrentChange(val) {
      // console.log(`当前页: ${val}`, "rawCurrentChange");
      this.rawTablePage.currentPage = val;
      this.GetBomDetail(this.rawTablePage.pageSize, val);
    },
    //自制件分页事件
    selfSizeChange(val) {
      // console.log(`每页 ${val} 条`, "rawSizeChange");
      this.selfTablePage.pageSize = val;
      this.GetBomHomemade(val, 1);
      this.selfTablePage.currentPage = 1;
    },
    selfCurrentChange(val) {
      // console.log(`当前页: ${val}`, "rawCurrentChange");
      this.selfTablePage.currentPage = val;
      this.GetBomHomemade(this.selfTablePage.pageSize, val);
    },
    //获取原材料
    async GetBomDetail(n1 = 10, n2 = 1) {
      await request({
        url: "/api/Values/GetBomDetail",
        method: "get",
        params: {
          id: this.clickId,
          size: n1, //每页条数
          page: n2, //当前页数
          message: "",
        },
      })
        .then((res) => {
          // console.log(res.data);
          this.rawTablePage.total = res.data.Total;
          this.rawTableData = res.data.ListData;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取自制件
    async GetBomHomemade(n1 = 10, n2 = 1) {
      await request({
        url: "/api/Values/GetBomHomemade",
        method: "get",
        params: {
          id: this.clickId,
          size: n1, //每页条数
          page: n2, //当前页数
          message: "",
        },
      })
        .then((res) => {
          // console.log(res.data);
          this.selfTableData = res.data.ListData;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //父节点弹窗打开事件
    handleVisable() {
      this.FnVisible = true;
    },
    //父节点弹窗取消事件
    delFnVisible() {
      this.FnVisible = false;
      this.resetForm("fnForm");
    },
    //子节点弹窗取消事件
    delSonVisible() {
      this.CliVisible = false;
      this.resetForm("sonForm");
    },
    //新增子级 BOM
    append(node, data) {
      this.CliVisible = true;
      console.log(data.id);
      this.id = data.id;
    },
    //新增子级 BOM
    async sunSonVisible(formName) {
      await this.$refs[formName].validate((valid) => {
        if (valid) {
          request({
            url: "/api/Values/InsertBom",
            method: "post",
            data: {
              ParentNo: this.id,
              Type: "PrdBom",
              cDefine3: this.sonForm.cDefine3,
              Verson: this.sonForm.Verson,
              State: this.sonForm.State,
              ProdQty: this.sonForm.ProdQty,
              cDefine1: this.sonForm.cDefine1,
              cDefine2: this.sonForm.cDefine2,
              ConfirmDate: this.sonForm.ConfirmDate,
              CreateUser: this.sonForm.CreateUser,
              CreateDate: this.sonForm.CreateDate,
              Stated: this.sonForm.Stated,
              Remark: this.sonForm.Remark,
              cDefine4: this.sonForm.cDefine4,
              cDefine5: this.sonForm.cDefine5,
              cDefine6: this.sonForm.cDefine6,
              cInvCode: "",
              cInvName: "",
              cInvStd: "",
              ExRate: "",
              ModifiedDate: "",
              ModifiedUser: "",
            },
          })
            .then((res) => {
              console.log(res);
              if (res.status == 200) {
                this.$message({
                  message: "添加BOM成功",
                  type: "success",
                });
                this.CliVisible = false;
                this.resetForm("sonForm");
                this.getTreeTable();
              } else {
                this.$message({
                  message: "添加BOM失败",
                  type: "warning",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除BOM
    remove(node, data) {
      this.$confirm("此操作将永久删除该节点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(data.id);
          request({
            url: "/api/Values/DeleteBomProBom",
            method: "post",
            params: {
              id: data.id,
            },
          })
            .then((res) => {
              // console.log(res);
              if (res.data === "1") {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTreeTable();
                this.GetBomDetail();
                this.GetBomHomemade();
              }
              if (res.data == "3") {
                this.$message({
                  type: "info",
                  message: "已经领料的物料不允许删除，删除失败!",
                });
              }
              if (res.data == "2") {
                this.$message({
                  type: "info",
                  message: "删除失败!",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取一级bom信息
    GetBomDetailsValue(id, ParentNo) {
      request({
        url: "/api/Values/GetBomDetailsValue",
        method: "get",
        params: {
          id: id,
          ParentNo: ParentNo,
        },
      })
        .then((res) => {
          console.log(res.data);
          let resDate = res.data[0];
          this.formInline.cDefine1 = resDate.cDefine1;
          this.formInline.cDefine2 = resDate.cDefine2;
          this.formInline.cDefine3 = resDate.cDefine3;
          this.formInline.Verson = resDate.Verson;
          this.formInline.Remark = resDate.Remark;
          this.formInline.ConfirmDate = resDate.ConfirmDate;
          this.formInline.CreateUser = resDate.CreateUser;
          this.formInline.State = resDate.State;
          this.formInline.cInvName = resDate.cInvName;
          this.formInline.cInvCode = resDate.cInvCode;
          this.formInline.OrderNo = resDate.OrderNo;
          this.formInline.ProjectNo = resDate.ProjectNo;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取计量单位
    GetUnitName() {
      request({
        url: "/api/Values/GetUnitName",
        method: "get",
      })
        .then((res) => {
          // console.log(res);
          this.fnOptions = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取产品名称
    GetProduct() {
      request({
        url: "/api/Values/GetProduct",
        method: "get",
      })
        .then((res) => {
          // console.log(res);
          this.ProductList = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取物料
    GetInventory(n1, n2) {
      request({
        url: "/api/Values/GetInventory",
        method: "get",
        params: {
          size: n1, //每页条数
          page: n2, //当前页数
          message: "",
        },
      })
        .then((res) => {
          // console.log(res.data);
          this.tablePage.total = res.data.Total;
          this.allTableData = res.data.ListData;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //物料搜索
    allSearch() {
      request({
        url: "/api/Values/GetInventory",
        method: "get",
        params: {
          size: this.tablePage.pageSize, //每页条数
          page: this.tablePage.currentPage, //当前页数
          message: this.searchInput,
        },
      })
        .then((res) => {
          // console.log(res.data);
          this.tablePage.total = res.data.Total;
          this.allTableData = res.data.ListData;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //分页记忆事件
    getRowKeys(row) {},
    //所有物料的选中框事件
    handleAllSelection(val) {
      const resData = val.map((item) => {
        return {
          InvID: item.OrderNumber,
          Nqty: item.cDefine15,
        };
      });
      // console.log(resData);
      this.InvDetailVal = resData;
    },
    //提交选中的数据
    handleDelTable() {
      console.log("BomID", this.clickId);
      console.log("InvDetail", this.InvDetail);
      request({
        url: "/api/Values/InBomDetail",
        method: "post",
        data: {
          InvDetail: this.InvDetailVal,
          BomID: this.clickId,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.$message({
              message: "添加材料成功",
              type: "success",
            });
            this.tableVisible = false;
            this.getTreeTable();
          } else {
            this.$message({
              message: "添加失败,请联系管理员",
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "添加失败,请选中节点再添加",
            type: "warning",
          });
        });
    },
    //所有物料分页事件
    //每页条数
    tableSizeChange(val) {
      this.tablePage.pageSize = val;
      this.GetInventory(val, 1);
      this.allSearch();
      this.tablePage.currentPage = 1;
    },
    //当前页
    tableCurrentChange(val) {
      this.tablePage.currentPage = val;
      this.allSearch();
      this.GetInventory(this.tablePage.pageSize, val);
    },
  },
  created() {
    this.GetDesignBom();
    const { pageSize, currentPage } = this.tablePage;
    this.getTreeTable();
    this.GetInventory(pageSize, currentPage);
    this.GetUnitName();
    this.GetProduct();
  },
};
</script>

<style>
.About {
  width: 100%;
  height: 100%;
  color: #333;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.headerBox {
  /* width: 100%; */
  height: 2vw;
  line-height: 2vw;
  margin-top: 0.5vw;
  display: flex;
}
.item {
  height: 1vw;
}
.containerBox {
  display: flex;
  flex: 1;
  border: 1px solid #eee;
}
.asideBox {
  background-color: rgb(238, 241, 246);
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 0.5vw;
  box-sizing: border-box;
}
.rowBoxed {
  /* width: 100%; */
  height: 5vw;
  line-height: 2vw;
  margin: 0.5vw 0;
}
.treeBox {
  flex: 1;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.rightBox {
  /* height: 100%; */
  flex: 3;
  display: flex;
  flex-direction: column;
}
.mainBox {
  /* height: 10vw; */
  box-sizing: border-box;
  padding: 1vw 1vw 0 1vw;
}
.footerBox {
  flex: 1;
  box-sizing: border-box;
  padding: 1vw;
}

.block {
  margin-top: 5px;
}
.imgStyle {
  width: 12.5vw;
  height: 12.5vw;
}
.el-pagination {
  margin-top: 1vw;
}
.el-table td,
.el-table th {
  text-align: center;
}
.el-form--inline .el-form-item {
  display: inline-block;
  vertical-align: top;
}

.el-form-item {
  margin-bottom: 0.5vw;
}
.searchBox {
  margin-bottom: 0.5vw;
  width: 100%;
  display: flex;
}
.searchBox > .el-input {
  width: 25vw;
  margin-right: 1vw;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-input{
  width: 80%;
}
</style>
